import React, { FC, ReactElement, useMemo } from 'react';
import { Collapse, Form, Card, Skeleton } from '@douyinfe/semi-ui';
import { IconChevronLeft } from '@douyinfe/semi-icons';
import type { GoodsServiceDetailItem } from '../types';
import FieldsGoodsDetail from '../../FieldsGoods/sub/Detail';
import type { FieldsGoodsItem } from '../../FieldsGoods/types';
import { Link } from 'react-router-dom';

interface IProps {
  loading: boolean;
  currentData: GoodsServiceDetailItem;
}

const { Input, TextArea } = Form;

const ShowDetail: FC<IProps> = ({ loading, currentData }): ReactElement => {

  const extraDetail: Partial<FieldsGoodsItem> = useMemo(
    () => {
      const { parking, wifi, ...detailData } = (currentData || {});
      return detailData;
    },
    [currentData]
  );

  return (
    <Card
      title={(
        <header>
          <Link to="/service/fields-goods-services" style={{ marginRight: 10, position: 'relative', top: 3 }}>
            <IconChevronLeft />
          </Link>

          类目服务详情 {
            currentData.name
              ? (
                <>
                  - <Link to={`/service/fields-goods?keyword=${window.encodeURIComponent(currentData.name)}`}>
                    <strong>{currentData.name}</strong>
                  </Link>
                </>
              )
              : ''
          }
        </header>
      )}
    >
      <Collapse defaultActiveKey={['1']}>
        <Collapse.Panel itemKey="1" header="当前服务信息">
          {Object.keys(currentData).length > 0
            ? (
              <Form
                initValues={currentData}
                key="showDetailForm"
                layout="vertical"
                labelPosition="left"
                labelAlign="right"
                labelWidth="150px"
              >
                <>
                  <Input
                    required
                    disabled
                    field="parking"
                    name="停车场"
                    style={{ width: 300, display: 'inline-block' }}
                  />
                  <TextArea
                    required
                    disabled
                    field="wifi"
                    name="WIFI"
                    rows={5}
                    style={{ width: 300, display: 'inline-block' }}
                  />
                </>
              </Form>
            )
            : (
              <Skeleton />
            )
          }
        </Collapse.Panel>
        <Collapse.Panel itemKey="2" header="原类目信息">
          <FieldsGoodsDetail
            loading={loading}
            {...extraDetail}
          />
        </Collapse.Panel>
      </Collapse>
    </Card>
  )
}

export default ShowDetail;
